<template>
  <div style="height: 100%; overflow-y: auto">
    <img
      v-for="(item, key) in arr"
      :key="key"
      v-lazy="item"
      :src="item"
      alt=""
      height="500"
      width="300"
    />
  </div>
</template>

<script setup>
// glob 是懒加载的方式
let imageList = import.meta.glob('./assets/images/*.*', { eager: true })
// console.log(imageList)
let arr = Object.values(imageList).map((item) => item.default)
console.log(arr)
const vLazy = async (el, binding) => {
  let url = await import('./assets/avatar.jpg')
  el.src = url.default
  let observer = new IntersectionObserver((res) => {
    console.log(res[0])
    if (res[0].isIntersecting > 0 && res[0].isIntersecting) {
      el.src = binding.value
      observer.unobserve(el)
    }
  })
  observer.observe(el)
}
</script>

<style lang="scss" scoped>
.wrapper {
  overflow-y: auto;
}
</style>
